<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--

	-
	Lovely CSS - A CSS framework by Constantinos Demetriadis
	-
	URL:			www.ohmylovely.com/css-framework/
	Description:	Example template
	Author:			Constantinos M. Demetriadis
    -
	SVN Repository Info
	$Id: example.html 289 2010-03-17 15:02:11Z cdemetriadis $
	$HeadURL: http://lovely-css.googlecode.com/svn/trunk/example.html $
	-

--> 

	<title>Lovely CSS Framework</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Constantinos Demetriadis" />
	<meta name="url" content="http://www.example.com" />
	<meta name="keywords" content="Keywords" />
	<meta name="description" content="Description" />
	<meta name="copyright" content="Copyright" />
	<meta name="robots" content="ALL" />

	<link rel="shortcut icon" href="favicon.png" />
    
    <!-- Google AJAX Libraries
         jQuery: http://code.google.com/apis/ajaxlibs/ -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>

    <!-- jQuery plugins
         SWFObject v1.0.3: http://jquery.thewikies.com/swfobject/ -->
	<script src="./lovely-css/js/jquery.swfobject.min.js" type="text/javascript"></script>

    <!-- jQuery plugins
         PNG Fix v1.1: http://jquery.andreaseberhard.de/pngFix/ -->
	<script src="./lovely-css/js/jquery.pngFix.pack.js" type="text/javascript"></script>
	
	<script type="text/javascript"> 
    	$(document).ready(function(){ 
        	$(document).pngFix(); 
	    }); 
	</script> 
    
	<style type="text/css" media="screen">
        @import url("./lovely-css/_base.css");
        @import url("./lovely-css/_tpl.screen.css");
		@import url("./lovely-css/plug-ins/plg.forms.css"); /* Form styling */
        @import url("./lovely-css/plug-ins/plg.development.css"); /* Development Module adds the column visualization */
	</style>

	<style type="text/css" media="print">@import url("./lovely-css/_tpl.print.css");</style>
	<!--[if IE 7]><style type="text/css">@import url("./lovely-css/_inc.ie7-fix.css");</style><![endif]-->
    <!--[if lt IE 7]><style type="text/css">@import url("./lovely-css/_inc.ie-fix.css");</style><![endif]-->

</head>
<body>

<div class="gridContainer-16 pad-5 grid-dev">

	<div class="gridExample">
	
		<!-- Complete 16 Column Grid -->
		<div class="grid-sixteen"><h1>16 Column Grid with 5px padding - Demonstration</h1></div>
		<div class="grid-sixteen"><p>Each box contains the class name according to the Lovely CSS Framework.</p></div>

		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-two"><span>grid-two</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-three"><span>grid-three</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-four"><span>grid-four</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-five"><span>grid-five</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-six"><span>grid-six</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-seven"><span>grid-seven</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-eight"><span>grid-eight</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-nine"><span>grid-nine</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-ten"><span>grid-ten</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-eleven"><span>grid-eleven</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-twelve"><span>grid-twelve</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-thirteen"><span>grid-thirteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-fourteen"><span>grid-fourteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-fifteen"><span>grid-fifteen</span></div>
		<div class="grid-one"><span>grid-one</span></div>

		<div class="grid-sixteen"><span>grid-sixteen</span></div>
		
	</div>
	
</div>

<br /><br />

<div class="gridContainer-8 pad-10 grid-dev">

	<div class="gridExample">
		
		<!-- Mix and match Grid -->	
		<div class="grid-8"><h1>8 Column Grid Mix 'n' Match with 10px padding - Demonstration</h1></div>
		<div class="grid-8"><p>Just freaking out with the grid columns. You can also use numbers instead of words. Example: grid-4 instead of grid-four</p></div>
		
		<div class="grid-2"><span>grid-2</span></div>
		<div class="grid-4"><span>grid-4</span></div>
		<div class="grid-2"><span>grid-2</span></div>

		<div class="grid-4"><span>grid-4</span></div>
		<div class="grid-2"><span>grid-2</span></div>
		<div class="grid-1"><span>grid-1</span></div>
		<div class="grid-1"><span>grid-1</span></div>

		<div class="grid-1"><span>grid-1</span></div>
		<div class="grid-1"><span>grid-1</span></div>
		<div class="grid-6"><span>grid-6</span></div>
		
	</div>

</div>

<br /><br />

<div class="gridContainer-6 grid-dev">

	<div class="gridExample">
		
		<!-- Nested Grid Columns -->
		<div class="grid-6"><h1>6 Column Nested Grid with no padding - Demonstration</h1></div>
		<div class="grid-6"><p>Adding some nested columns.</p></div>
		
		<div class="grid-1"><span>grid-1</span></div>
		<div class="grid-4">
			<div class="grid-2 nested-first">
				<span>nested grid-2</span>
			</div>
			<div class="grid-1">
				<span>nested grid-1</span>
			</div>
			<div class="grid-1 nested-last">
				<span>nested grid-1</span>
			</div>
		</div>
		<div class="grid-1"><span>grid-1</span></div>

	</div>
	
</div>

<br /><br />

<div class="gridContainer-16 pad-10">

	<div class="grid-8">
		
		<div class="grid-8 nested-sole"><h1>Master HTML Reset &amp; Font Setup</h1></div>
		<div class="grid-8 nested-sole"><p>This is the default appearance of HTML elements when using the Lovely CSS Framework.</p></div>
	    
	    <div class="grid-8 nested-sole">    
		
			<h1>h1</h1>
			<h2>h2</h2>
			<h3>h3</h3>
			<h4>h3</h4>
			<h5>h3</h5>
			<h6>h3</h6>
		
		    <hr />
		
			<p>This is a paragraph with a <a href="#">link</a></p>
			
		    <hr />
			
			<p>this is a paragraph with an Inline image <a href="#" title="Inline image"><img src="_assets/chart_pie.png" alt="Inline image" width="16" height="16" /></a></p>
			
		    <hr />
		
		    <blockquote><p>This is a blockquote</p></blockquote>
		
		    <hr />
		
			<pre>This is some block with pre</pre>
		
		    <hr />
		
			<code>This is some block with code</code>
		
		    <hr />
			
			<table summary="Dummy Table">
				<caption>Table Caption</caption>
		        <thead>
		            <tr>
		                <th>Header</th>
		                <th>Header</th>
		                <th>Header</th>
		                <th>Header</th>
		                <th>Header</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr>
		                <th>Data</th>
		                <td>Data</td>
		                <td>Data</td>
		                <td>Data Data Data Data Data</td>
		                <td>Data</td>
		            </tr>
		        </tbody>
		        <tfoot>
		            <tr>
		                <th>Data Data</th>
		                <td>Data</td>
		                <td>Data Data Data Data Data</td>
		                <td>Data</td>				
		                <td>Data</td>
		            </tr>
		        </tfoot>
			</table>
			
		    <hr />
			
			<ul>
				<li>Unordered List #1 (ul)</li>
				<li>Unordered List #2 (ul)</li>
			</ul>
			
		    <hr />
			
			<ol>
				<li>Ordered List #1 (ol)</li>
				<li>Ordered List #2 (ol)</li>
			</ol>
			
		    <hr />
			
			<dl>
				<dt>Definition Term (dt)</dt>
				<dd>Definition Description (dd)</dd>
			</dl>
		
		</div>
    
	</div>
	
	<div class="grid-8">
		
		<div class="grid-8 nested-sole"><h1>Form Setup</h1></div>
		<div class="grid-8 nested-sole"><p>This is the default appearance of form elements when using the Lovely CSS Framework.</p></div>
	    
	    <div class="grid-8 nested-sole">

	    	<div class="formContainer">
	    	<form action="#" method="get">
	    	
	    		<fieldset>
	    			<legend>Form fieldset</legend>
	    			
	    			<div class="formItem">
	    				<label for="form-item-name">Name: <em>*</em></label>
	    				<input type="text" name="name" id="form-item-name" class="itemText" value="" tabindex="" />
	    				<p class="note">Here's a little note for the field in question.</p>
	    			</div>
	    			
	    			<div class="formItem error">
	    				<label for="form-item-name">Name (error): <em>*</em></label>
	    				<input type="text" name="name" id="form-item-name" class="itemText" value="" tabindex="" />
	    				<p class="note">There was an error with this field</p>
	    			</div>
	    			
	    			<div class="formItem">
	    				<label for="form-item-password">Password:</label>
	    				<input type="password" name="password" id="form-item-password" class="itemPassowrd" value="" tabindex="" />
	    			</div>
	    			
	    			<div class="formItem">
	    				<label for="form-item-file">File:</label>
	    				<input type="file" name="file" id="form-item-file" class="itemFile" value="" tabindex="" />
	    			</div>
	    			
	    			<div class="formItem">
	    				<span class="label">Select One:</span>
	    				<div class="controlSet horizontal">
		    				<label for="form-item-radio-yes">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-yes" class="itemRadio" value="Yes" tabindex="" /> Yes
		    				</label>
		    				<label for="form-item-radio-no">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-no" class="itemRadio" value="No" tabindex="" /> No
		    				</label>
		    				<label for="form-item-radio-maybe">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-maybe" class="itemRadio" value="Maybe" tabindex="" /> Maybe
		    				</label>
	    				</div>
	    			</div>
	    			
	    			<div class="formItem">
	    				<span class="label">Select One:</span>
	    				<div class="controlSet vertical">
		    				<label for="form-item-radio-vert-yes">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-vert-yes" class="itemRadio" value="Yes" tabindex="" /> Yes
		    				</label>
		    				<label for="form-item-radio-vert-no">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-vert-no" class="itemRadio" value="No" tabindex="" /> No
		    				</label>
		    				<label for="form-item-radio-vert-maybe">
		    					<input type="radio" name="radio-buttons" id="form-item-radio-vert-maybe" class="itemRadio" value="Maybe" tabindex="" /> Maybe
		    				</label>
	    				</div>
	    			</div>
	    			
	    			<div class="formItem">
	    				<span class="label">Select Any:</span>
	    				<div class="controlSet horizontal">
		    				<label for="form-item-chbox-yes">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-yes" class="itemCheckbox" value="Yes" tabindex="" /> Yes
		    				</label>
		    				<label for="form-item-chbox-no">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-no" class="itemCheckbox" value="No" tabindex="" /> No
		    				</label>
		    				<label for="form-item-chbox-maybe">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-maybe" class="itemCheckbox" value="Maybe" tabindex="" /> Maybe
		    				</label>
	    				</div>
	    			</div>
	    			
	    			<div class="formItem">
	    				<span class="label">Select Any:</span>
	    				<div class="controlSet vertical">
		    				<label for="form-item-chbox-vert-yes">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-vert-yes" class="itemCheckbox" value="Yes" tabindex="" /> Yes
		    				</label>
		    				<label for="form-item-chbox-vert-no">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-vert-no" class="itemCheckbox" value="No" tabindex="" /> No
		    				</label>
		    				<label for="form-item-chbox-vert-maybe">
		    					<input type="checkbox" name="chbox-buttons" id="form-item-chbox-vert-maybe" class="itemCheckbox" value="Maybe" tabindex="" /> Maybe
		    				</label>
	    				</div>
	    			</div>
	    			
	    			<div class="formItem">
	    				<label for="form-item-textarea">Comment:</label>
	    				<textarea name="comment" id="form-item-textarea" class="itemTextarea" tabindex=""></textarea>
	    			</div>
	    			
	    			<div class="formItem">
	    				<label></label>
	    				<div class="buttonSet">
		    				<input type="submit" class="buttonSubmit" value="Submit" tabindex="" />
		    				<input type="reset" class="buttonReset" value="Reset" tabindex="" />
		    				<input type="button" class="buttonNeutral" value="Generic" tabindex="" />
	    				</div>
	    			</div>
	    			    			
	    		</fieldset>
	    		
	    	</form>
	    	</div>

	    </div>
	    
	</div>
        
</div>

</body>

</html>